<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建活动</title>
  <link rel="stylesheet" href="./shareActivity.css">
  <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
  <form lay-filter="global-form" onsubmit="return false;" class="layui-form">
    <div class="pageTitle">
      <span class="pageTitleText">分享有礼<span class="pageTitleInfo">活动介绍</span></span>
      <button class="layui-btn layui-btn-normal">保存</button>
    </div>
    <div class="shareActivitySetting">
      <div class="layui-collapse">
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">基础设置</h2>
          <div class="layui-colla-content layui-show">
            <div class="activityName">活动名称</div>
            <div class="layui-form-item">
              <label class="layui-form-label">活动有效期限</label>
              <div class="layui-input-inline">
                <input type="text" name="title" required placeholder="活动开始时间" autocomplete="off" id="begin-date-time" class="layui-input">
              </div>
              <div class="layui-form-mid">---</div>
              <div class="layui-input-inline">
                <input type="text" name="title" required  placeholder="活动结束时间" autocomplete="off" id="end-date-time"  class="layui-input data-time">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">周期循环设置</label>
              <div class="layui-input-inline" style="width:600px;">
                <input type="radio" name="cycle" value="use-day-loop" title="每日循环" lay-filter="loop-set">
                <input type="radio" name="cycle" value="use-mouth-loop" title="按月指定循环日期" lay-filter="loop-set">
                <input type="radio" name="cycle" value="use-week-loop" title="按周指定循环周期" lay-filter="loop-set">
              </div>
            </div>
            <!-- 可用时段 -->
            <div class="layui-from-item">
            </div>
            <!-- 按月指定循环 -->
            <div class="layui-form-item use-mouth-loop" style="display: none;">
              <label class="layui-form-label" style="width:120px">
                每月循环日期
              </label>
              <div class="layui-input-block" style="display: flex">
                <div class="finish-choose loop-date">
                  <i class="layui-icon" onclick="dateshow()" id="test1"
                    style="margin-top:5px;font-size: 30px;display: inline-block">&#xe637</i>
                  <div class="choose-box">

                  </div>
                </div>
                <div class="custom-date" style="display: none">
                  <ul>
                  </ul>
                  <div class="btn">
                    <button type="button" onclick="canelChoose()" class="layui-btn cancelChoose"
                      lay-filter="formDemo">取消选择</button>
                    <button type="button" onclick="selectRole()" class="layui-btn choose"
                      lay-filter="formDemo">确定选择</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- 按周循环 -->
            <div class="layui-form-item use-week-loop" style="display: none;">
              <label class="layui-form-label" style="width:120px">每周循环周期</label>
              <div class="layui-input-block">
                <input type="checkbox" name="one" lay-skin="primary" title="周一">
                <input type="checkbox" name="two" lay-skin="primary" title="周二">
                <input type="checkbox" name="three" lay-skin="primary" title="周三">
                <input type="checkbox" name="third" lay-skin="primary" title="周四">
                <input type="checkbox" name="five" lay-skin="primary" title="周五">
                <input type="checkbox" name="sex" lay-skin="primary" title="周六">
                <input type="checkbox" name="seven" lay-skin="primary" title="周日">
              </div>
            </div>
            <div class="active-effect">
              <div class="layui-form-item">
                <label class="layui-form-label">活动生效时段</label>
                <div class="layui-input-inline">
                  <input type="text" name="time1"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                </div>
                <div class="layui-form-mid">---</div>
                <div class="layui-input-inline">
                  <input type="text" name="time1"  placeholder="--:--" autocomplete="off" class="layui-input datetime">
                </div>
                <div class="layui-input-inline" style="width:80px;"><button type="button" class="layui-btn layui-btn-normal add-btn-js"><i
                      class="layui-icon">&#xe654;</i>添加</button></div>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">分享方参与群体设置</label>
              <div class="layui-input-inline" style="width:600px;">
                <input lay-filter="share-group-set" type="radio" name="sharePerson" value="1" title="所有人">
                <input lay-filter="share-group-set" type="radio" name="sharePerson" value="2" title="会员等级">
                <input lay-filter="share-group-set" type="radio" name="sharePerson" value="3" title="会员群体">
              </div>
            </div>
            <div class="layui-form-item" id="member_grade" style="display:none;">
              <label class="layui-form-label">会员等级</label>
              <div class="layui-input-inline" style="width:600px;">
                <input type="radio" name="sharePerson" value="all" title="A等级">
                <input type="radio" name="sharePerson" value="member" title="B等级">
                <input type="radio" name="sharePerson" value="group" title="C等级">
              </div>
            </div>
            <div class="layui-form-item" id="member_group" style="display: none;">
              <label class="layui-form-label">会员群体选择</label>
              <div class="layui-input-inline" style="width:200px;">
                <button id="add-member-group-js" class="layui-btn layui-btn-normal layui-btn-sm" type="button" style="margin-top:4px;"><i class="layui-icon">&#xe654;</i>添加</button>
                <button id="memberGroupTextWrap" class="layui-btn layui-btn-normal layui-btn-sm" type="button" style="display:none;margin-top:4px;"><i id="memberGroupClose" class="layui-icon">&#x1006;</i></button>
              </div>
            </div>
            <!--<div class="layui-form-item">
              <label class="layui-form-label">领取方参与群体设置</label>
              <div class="layui-input-inline" style="width:600px;">
                <input type="radio" name="getPerson" value="all" title="所有人" checked>
                <input type="radio" name="getPerson" value="member" title="会员等级">
                <input type="radio" name="getPerson" value="group" title="会员群体">
              </div>
            </div>-->
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">分享放奖励规则设置</h2>
          <div class="layui-colla-content layui-show">
            <div class="shareRuleSetting">
              <div class="title">分享者领取礼包条件</div>
              <div class="conditionItemWrap">
                <div class="conditionItem">
                  <div class="itemLeft"><i class="iconfont">&#xe640;</i></div>
                  <div class="itemRight">
                    <p class="item-right-title">将完成活动分享给好友的操作</p>
                    <p><i class="iconfont">&#xe608;</i>只要分享给好友，无论好友是否领取，注册会员，分享方都可以得到奖励。</p>
                    <p>
                      注意：微信分享功能只要点击分享按钮，则分享成功，系统无法验证是否真的发送给了好友，建议商家同时勾选其他选项，配合系统验证，如需要分享对象注册会员或领取礼包，才算分享成功。
                    </p>
                  </div>
                </div>
                <div class="conditionItem">
                  <div class="itemLeft"><i class="iconfont">&#xe640;</i></div>
                  <div class="itemRight">
                    <p class="item-right-title">分享对象成功领取分享礼包</p>
                    <p><i class="iconfont">&#xe608;</i>只要用户（领取方）进入分享链接的页面，成功领取礼包后，分享者才可以获得奖励礼包。</p>
                    <p><i class="iconfont">&#xe608;</i>若分享礼包内包含优惠券、余额、积分，系统将让领取方先注册会员，再领取礼包</p>
                  </div>
                </div>
                <div class="conditionItem">
                  <div class="itemLeft"  data-fun="share-obj-order"><i class="iconfont">&#xe640;</i></div>
                  <div class="itemRight">
                    <p class="item-right-title">分享对象领取礼包后去下单</p>
                    <p><i class="iconfont">&#xe608;</i>是否要求订单为首次（当不要求分享对象必须是新用户或新会员时候，可能会有曾经已下过单的情况）</p>
                    <div class="layui-input-inline">
                      <input type="radio" disabled name="fistOrder" value="1" title="必须首次下单">
                      <input type="radio" disabled name="fistOrder" value="2" title="第几次下单不重要" checked>
                    </div>
                    <p><i class="iconfont">&#xe608;</i>分享对象的订单是否必须完成</p>
                    <div class="layui-input-inline">
                      <input type="radio" disabled name="orderOver" value="1" title="必须完成订单">
                      <input type="radio" disabled name="orderOver" value="2" title="只要有下单即可生效" checked>
                    </div>
                    <p><i class="iconfont">&#xe608;</i>分享对象的订单发生全额退款，需要退回分享者账户剩余的礼包吗？</p>
                    <div class="layui-input-inline">
                      <input type="radio" disabled name="orderReturn" value="1" title="需要退回">
                      <input type="radio" disabled name="orderReturn" value="2" title="无需退回" checked>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="sharePersonOrderCondition show-share-person-js" style="display: none;">
              <div class="layui-form-item" style="width:100%;">
                <label class="layui-form-label text-bold">分享对象下单条件</label>
                <div class="layui-inline" style="width:700px;">
                  <input type="checkbox" name="consume" title="消费满" lay-skin="primary">
                  <input style="display:inline-block;width:100px;" type="text" name="title" placeholder="0为不限"
                    autocomplete="off" class="layui-input">
                  <span style="margin-right:20px;">元</span>
                  <input type="checkbox" name="consume" title="使用礼包优惠" lay-skin="primary">
                </div>
              </div>
            </div>
            <!-- 订单含指定商品 -->
            <div class="orderIncludeGoods show-share-person-js" style="display: none;">
              <div class="condition">
                <span class="text-bold margin-left-20">订单含指定商品</span>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm add-goods-btn-js"><i
                    class="layui-icon">&#xe624;</i>添加指定商品</button>
                <span>(不添加指定商品则表示购买任意商品)</span>
              </div>
              <div>
                <table id="includeGoods" lay-filter="includeGoods"></table>
              </div>
            </div>
            <!-- 分享次数限制 -->
            <div class="share-count-limit">
              <div class="text-bold">分享次数限制</div>
              <div class="share-count-option">
                <div class="layui-form-item" style="width:100%">
                  <label class="layui-form-label">邀请人最多可分享</label>
                  <div class="layui-line">
                    <input type="text" class="layui-input" style="display: inline-block;width:100px;">
                    次<span>(0或不填则为不限)</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 奖励礼包礼品设置 -->
            <div class="gift-bag-setting">
              <div class="setting-options">
                <div class="layui-form-item" style="width:100%">
                  <label class="layui-form-label text-bold">奖励礼包礼品设置</label>
                  <div class="layui-line">
                    <input type="checkbox" lay-filter="gift-bag-set-filter" lay-skin="primary" name="gift[coupon]" value="coupon" title="优惠券">
                    <input type="checkbox" lay-filter="gift-bag-set-filter" lay-skin="primary" name="gift[price]" value="price" title="余额">
                    <input type="checkbox" lay-filter="gift-bag-set-filter" lay-skin="primary" name="gift[integral]" value="integral" title="积分">
                  </div>
                </div>
                <div class="setting-wrap">
                  <div class="setting-wrap-head show-coupon-js" style="display: none;">
                    <span>奖励优惠券</span>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i
                        class="layui-icon">&#xe624;</i>添加优惠券</button>
                  </div>
                  <div class="setting-wrap-body  show-coupon-js" style="display: none;">
                    <table id="settingWrapTable"></table>
                  </div>
                  <div class="setting-wrap-head  show-price-js"  style="display: none;">
                    <span>奖励金额</span>
                    <input type="text" class="layui-input inline-input">
                    <span>元</span>
                  </div>
                  <div class="setting-wrap-head margin-top-10  show-integral-js"  style="display: none;">
                    <span>奖励积分</span>
                    <input type="text" class="layui-input inline-input">
                    <span>分</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="share-page-ui-set">
              <p>分享页面UI配置</p>
              <div class="share-page-ui-wrap">
                <div class="show-ui">
                  <div class="show-ui-head">欢迎光临小微</div>
                  <div class="show-ui-set-options my_background_color_target">
                    <div data-index = "1" class="show-ui-member-car show-ui-item-click my_background_color_target">
                      <img src="../../img/a.png" alt="会员卡">
                    </div>
                    <div class="my_background_color_target" style="padding:0px 20px;">
                    <!-- 简约版 -->
                    <div data-index = "2" id="my_shadow_opacity_slider_target"  class="show-ui-set-item show-ui-item-click" style="margin-top:-50px;">
                      <p id="my_title_editor_set_target">我的福利</p>
                      <p id="my_subtitle_editor_set_text_target">邀请新人好友首次下单签收即可获得</p>
                      <!-- 简约版 -->
                      <div  class="coupon-item version-simple" style="display: none;">
                        <div  class="coupon-item-wrap" id="my_coupon_border_color_target">
                          <div class="coupon-item-wrap-left">
                            <div class="coupon-item-icon"><div id="my_coupon_limit_color_target" class="my_coupon_unit_color_target" data-mul="background">￥</div></div>
                            <div class="coupon-item-money my_coupon_unit_color_target" data-mul="color" data-mul="color">10</div>
                            <div class="coupon-item-info">
                              <div class="my_coupon_unit_color_target" data-mul="color">优惠券</div>
                              <div id="my_usecondition_text_font_color_target" class="my_is_show_usecondition_select_target">仅限线上活动使用</div>
                            </div>
                          </div>
                          <div class="coupon-item-wrap-right" id="my_subcoupontitle_font_color_target">无门槛</div>
                        </div>
                      </div>
                      <!-- 渐进版 -->
                      <div class="coupon-gradient-item version-gradient">
                        <div class="coupon-gradient-item-wrap">
                          <div>
                            <div>￥</div>
                            <div>20</div>
                          </div>
                          <div>
                            <div>邀新福利券</div>
                            <div class="my_is_show_usecondition_select_target">全场通用</div>
                            <div>有效期 2020-06-12</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div data-index = "3" id="friend_module_border_color_target" class="show-ui-set-item show-ui-item-click">
                      <p id="friend_title_editor_set_text_target">好友福利</p>
                      <p id="friend_subtitle_editor_set_text_target">仅首次加入小微的会员用户可以领取</p>
                      <div class="coupon-item friend-version-simple">
                        <div class="coupon-item-wrap"  id="friend_coupon_border_color_target">
                          <div class="coupon-item-wrap-left">
                            <div class="coupon-item-icon"><div id="friend_coupon_limit_color_target" class="friend_coupon_unit_mulcolor_target" data-mul="background">￥</div></div>
                            <div class="coupon-item-money friend_coupon_unit_mulcolor_target" data-mul="color">10</div>
                            <div class="coupon-item-info">
                              <div class="friend_coupon_unit_mulcolor_target" data-mul="color">折扣券</div>
                              <div id="friend_is_show_usecondition_select_target">仅限线上活动使用</div>
                            </div>
                          </div>
                          <div id="friend_subcoupontitle_font_color_target" class="coupon-item-wrap-right">无门槛</div>
                        </div>
                      </div>
                      <!-- 渐进版 -->
                      <div class="coupon-gradient-item friend-version-gradient">
                        <div class="coupon-gradient-item-wrap">
                          <div>
                            <div>￥</div>
                            <div>20</div>
                          </div>
                          <div>
                            <div>邀新福利券</div>
                            <div class="">全场通用</div>
                            <div>有效期 2020-06-12</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="center-d" id="invite_editor_set_text_target">邀请记录</div>
                    <div data-index = "4" id="invite_module_color_target" class="show-ui-set-item show-ui-item-click">
                        <div id="invite_show_total_friends_radio_target">共邀请1位好友</div>
                        <div class="inviter-record">
                          <div class="portrait">
                            <img src="../../img/a.png" alt="头像">
                          </div>
                          <div class="center inviter-info">
                            <div>never</div>
                            <div>已获得礼包,还没想好买什么...</div>
                          </div>
                        </div>
                    </div>
                    <div data-index = "5" id="activity_background_color_target" class="activity-rule-style activity-rule show-ui-item-click">
                      <div class="center-d">--活动规则--</div>
                      <div>邀请好友规则</div>
                      <div id="activity_activityto_rule_html">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida </div>
                    </div>
                  </div>
                </div>
                <div style="height:50px;"></div>
                <div data-index = "6" class="center-d coupon-bottom-btn show-ui-item-click my_background_color_target">
                    <div id="bottom_editor_title_text_target">立即邀请</div>
                </div>
              </div>
              <div class="show-ui-text-fun">
                <div style="height:60px;"></div>
                <div style="height:114px;"><div><span>背景图</span></div></div>
                <div style="height:180px;"><div><span>分享者福利</span></div></div>
                <div style="height:180px;"><div><span>分享对象福利</span></div></div>
                <div style="height:150px;"><div><span>邀请记录</span></div></div>
                <div style="height:126px;"><div><span>活动规则展示区</span></div></div>
                <div style="height:70px;"><div style="align-self: flex-end;"><span>邀请按钮</span></div></div>
              </div>
              <div class="show-ui-config">
                <div class="show-ui-config-body">
                  <!-- 背景图 -->
                  <div class="set-background-img show-or-hide-share control1">
                    <div class="set-title">背景整体设置</div>
                    <div class="set-info">
                      建议可以增加品牌LOGO与名称的元素，背景图可以是衬托活动氛围+突出收货礼品的提示分享页展示着分享者与领取者双方的福利，可以表达，分享好友，得福利礼包。
                    </div>
                    <div class="set-upload-img">
                      <div>背景图上传</div>
                      <div class="flex-two">
                        <div>*建议格式.PNG/.jpg/.jpge/.gif
                          尺寸：340*340px，图片不超过1M
                          点击下方按钮可修改图片
                        </div>
                        <div>
                          <button class="layui-btn layui-btn-primary">添加图片</button>
                        </div>
                      </div>
                    </div>
                    <div class="flex-two-color">
                      <div>背景整体填充颜色</div>
                      <div id="my_background_color"></div>
                    </div>
                  </div>
                  <!-- 我的福利 -->
                  <div style="display:none;" class="set-background-img show-or-hide-share control2">
                    <div class="set-title">分享者福利移动端UI设置</div>
                    <div class="set-info">
                      建议在分享者的角度写一些与分享者可获得的福利有关的提示
                    </div>
                    <div class="flex-two-column">
                      <div>标题文案设置</div>
                      <div><input id="my_title_editor_set_text" name="my_title_editor_set_text" type="text" class="layui-input" value="我的福利"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>文案字体颜色</div>
                      <div id="my_title_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div>副标题文案设置</div>
                      <div><input id="my_subtitle_editor_set_text" type="text" class="layui-input" value="邀请新人好友首次下单签收即可获得"></div>
                    </div>
                    <div class="flex-two-color border-border-bottom-1px border-padding-bottom-8px">
                      <div>文案字体颜色</div>
                      <div id="my_subtitle_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div style="padding-bottom:0px;">福利券样式类型选择</div>
                      <div style="padding-bottom:0px;">
                        <input type="radio" name="my_coupon_style_set_radio" lay-filter="my_coupon_style_set_radio" value="0" title="简约版">
                        <input type="radio" name="my_coupon_style_set_radio" lay-filter="my_coupon_style_set_radio" value="1" title="渐变版">
                      </div>
                    </div>
                    <div class="flex-two-select">
                      <div>是否展示优惠券核销门槛</div>
                      <div>
                        <select name="my_is_show_usecondition_select" lay-filter="my_is_show_usecondition_select">
                           <option value="0">是</option>
                           <option value="1">否</option>
                        </select>
                      </div>
                    </div>
                    <div class="flex-two-color version-simple">
                      <div>券名称、券额度字体、单位标签填充颜色</div>
                      <div id="my_coupon_unit_mulcolor"></div>
                    </div>
                    <div class="flex-two-color version-simple">
                      <div>优惠券额度单位标签字体颜色</div>
                      <div id="my_coupon_limit_color"></div>
                    </div>
                    <div class="flex-two-color version-simple">
                      <div>优惠券副标题字体颜色</div>
                      <div id="my_subcoupontitle_font_color"></div>
                    </div>
                    <div class="flex-two-color version-simple">
                      <div>核销门槛字体颜色</div>
                      <div id="my_usecondition_text_font_color"></div>
                    </div>
                    <div class="flex-two-color version-simple">
                      <div>核销门店副券填充颜色</div>
                      <div id="my_usecondition_subtext_font_color"></div>
                    </div>
                    <div class="flex-two-color version-simple border-border-bottom-1px border-padding-bottom-8px">
                      <div>优惠券边框颜色</div>
                      <div id="my_coupon_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="my_module_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="my_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="my_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="my_shadow_opacity_slider"></div>
                      </div>
                    </div>

                  </div>
                  <!-- 好友福利 -->
                  <div style="display: none;" class="set-background-img show-or-hide-share control3">
                    <div class="set-title">分享对象福利移动端UI设置</div>
                    <div class="set-info">
                          建议在分享者的角度写一些被邀请好友可获得的福利有关的提示
                    </div>
                    <div class="flex-two-column">
                      <div>标题文案设置</div>
                      <div><input id="friend_title_editor_set_text" type="text" class="layui-input" value="我的福利"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>文案字体颜色</div>
                      <div id="friend_title_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div>副标题文案设置</div>
                      <div><input id="friend_subtitle_editor_set_text" type="text" class="layui-input" value="邀请新人好友首次下单签收即可获得"></div>
                    </div>
                    <div class="flex-two-color border-border-bottom-1px border-padding-bottom-8px">
                      <div>文案字体颜色</div>
                      <div id="friend_subtitle_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div style="padding-bottom:0px;">福利券样式类型选择</div>
                      <div style="padding-bottom:0px;">
                        <input type="radio" lay-filter="friend_coupon_style_set_radio" name="friend_coupon_style_set_radio" value="0" title="简约版">
                        <input type="radio" lay-filter="friend_coupon_style_set_radio" name="friend_coupon_style_set_radio" value="1" title="渐变版">
                      </div>
                    </div>
                    <div class="flex-two-select">
                      <div>是否展示优惠券核销门槛</div>
                      <div>
                        <select name="friend_is_show_usecondition_select" lay-filter="friend_is_show_usecondition_select">
                           <option value="0">是</option>
                           <option value="1">否</option>
                        </select>
                      </div>
                    </div>
                    <div class="flex-two-color friend-version-simple">
                      <div>券名称、券额度字体、单位标签填充颜色</div>
                      <div id="friend_coupon_unit_mulcolor"></div>
                    </div>
                    <div class="flex-two-color friend-version-simple">
                      <div>优惠券额度单位标签字体颜色</div>
                      <div id="friend_coupon_limit_color"></div>
                    </div>
                    <div class="flex-two-color friend-version-simple">
                      <div>优惠券副标题字体颜色</div>
                      <div id="friend_subcoupontitle_font_color"></div>
                    </div>
                    <div class="flex-two-color friend-version-simple">
                      <div>核销门槛字体颜色</div>
                      <div id="friend_usecondition_text_font_color"></div>
                    </div>
                    <div class="flex-two-color friend-version-simple">
                      <div>核销门店副券填充颜色</div>
                      <div id="friend_usecondition_subtext_font_color"></div>
                    </div>
                    <div class="flex-two-color friend-version-simple border-border-bottom-1px border-padding-bottom-8px">
                      <div>优惠券边框颜色</div>
                      <div id="friend_coupon_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="friend_module_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="friend_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="friend_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="friend_shadow_opacity_slider"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 邀请记录 -->
                  <div style="display:none" class="set-background-img show-or-hide-share control4">
                    <div class="set-title">邀请记录移动端UI设置</div>
                    <div class="set-info">
                      <p>1.仅展示符合条件的分享对象</p>
                      <p>2.仅在分享者页面中体现</p> 
                    </div>
                    <div class="flex-two-column">
                      <div>标题文案设置</div>
                      <div><input id="invite_editor_set_text" type="text" class="layui-input" value="邀请记录"></div>
                    </div>
                    <div class="flex-two-color border-border-bottom-1px border-padding-bottom-8px">
                      <div>文案字体颜色</div>
                      <div id="invite_editor_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                        <div style="padding-bottom:0px;">
                          是否展示邀请好友总数量
                            <p>建议：若每个人只有一次邀请机会，可以选择不展示，体验更友好</p>
                        </div>
                        <div style="padding-bottom:0px;">
                          <input type="radio" lay-filter="invite_show_total_friends_radio" name="invite_show_total_friends_radio" value="0" title="展示">
                          <input type="radio" lay-filter="invite_show_total_friends_radio" name="invite_show_total_friends_radio" value="1" title="不展示">
                        </div>
                    </div>
                    <div class="flex-two-color border-border-bottom-1px border-padding-bottom-8px">
                        <div>文案字体颜色</div>
                        <div id="invite_show_total_friends_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="invite_module_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="invite_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="invite_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="invite_module_shadow_opacity_slider"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 活动规则 -->
                  <div style="display: none;" class="set-background-img show-or-hide-share control5">
                    <div class="set-title">活动规则展示区设置</div>
                    <div class="set-info">
                      建议分别介绍分享方与领取方的奖励规则条件，奖励礼包福利去描述活动规则
                    </div>
                    <div style="height:450px" class="border-border-bottom-1px border-padding-bottom-8px">
                      <textarea name="content" id="activity_activity_rule_html" style="width:378px;height:450px;"></textarea>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="activity_background_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="activity_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="activity_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="activity_shadow_opacity_slider"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 底部按钮 -->
                  <div style="display:none;" class="set-background-img show-or-hide-share control6">
                    <div class="set-title">活动规则展示区设置</div>
                    <div class="flex-two-column">
                        <div>分享按钮文案</div>
                        <div><input id="bottom_editor_title_text" type="text" class="layui-input" value="立即邀请"></div>
                      </div>
                    <div class="flex-two-color">
                      <div>按钮文案字体的颜色</div>
                      <div id="bottom_editor_set_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>按钮填充颜色</div>
                      <div id="bottom_editor_set_background_color"></div>
                    </div>
                  </div>
                </div>
                <div class="show-ui-config-bottom">
                  <div id="setRestoreSefault">恢复默认</div>
                  <div id="setOperationBack">撤销编辑</div>
                  <div id="setSave">保存</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-colla-item">
          <h2 class="layui-colla-title">领取方奖励规则设置</h2>
          <div class="layui-colla-content layui-show">
            <div class="shareRuleSetting">
              <div class="title">领取者领取礼包条件</div>
              <div class="conditionItemWrap">
                <div class="conditionItem">
                  <div class="itemLeft"><i class="iconfont">&#xe640;</i></div>
                  <div class="itemRight">
                    <!-- <p>领取者领取礼包条件</p> -->
                    <p><i class="iconfont">&#xe608;</i>是否要求用户(领取方)是因此分享活动成为会员</p>
                    <div class="layui-input-inline">
                      <input type="radio" disabled name="becomeMember" value="1" title="必须是因此分享活动完成注册的会员(想要实现列表效果,请选择此项)"> <br />
                      <input type="radio" disabled name="becomeMember" value="2" title="不限制,曾经是会员也可以领取分享礼包">
                    </div>
                  </div>
                </div>

                <div class="conditionItem">
                  <div class="itemLeft"><i class="iconfont">&#xe640;</i></div>
                  <div class="itemRight">
                    <!-- <p>领取者领取礼包条件</p> -->
                    <p><i class="iconfont">&#xe608;</i>限制用户曾经是否消费过</p>
                    <div class="layui-input-inline">
                      <input type="radio" disabled name="customer" value="1" title="必须是从未下过订单的"> <br />
                      <input type="radio" disabled name="customer" value="2" title="不限制，曾经消费过的也可以领取分享礼包">
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 奖励礼包礼品设置 -->
            <div class="gift-bag-setting">
              <div class="setting-options">
                <div class="layui-form-item" style="width:100%">
                  <label class="layui-form-label text-bold">奖励礼包礼品设置</label>
                  <div class="layui-line">
                    <input type="checkbox" lay-filter="get-gift-bag-filter" lay-skin="primary" name="getGift[coupon]" value="coupon" title="优惠券">
                    <input type="checkbox" lay-filter="get-gift-bag-filter" lay-skin="primary" name="getGift[price]" value="price" title="余额">
                    <input type="checkbox" lay-filter="get-gift-bag-filter" lay-skin="primary" name="getGift[integral]" value="integral" title="积分">
                  </div>
                </div>
                <div class="setting-wrap">
                  <div class="setting-wrap-head show-get-gift-coupon-js" style="display: none;">
                    <span>奖励优惠券</span>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i
                        class="layui-icon">&#xe624;</i>添加优惠券</button>
                  </div>
                  <div class="setting-wrap-body show-get-gift-coupon-js" style="display: none;">
                    <table id="menberDicountCoupon"></table>
                  </div>
                  <div class="setting-wrap-head  show-get-gift-price-js" style="display: none;">
                    <span>奖励金额</span>
                    <input type="text"  class="layui-input inline-input">
                    <span>元</span>
                  </div>
                  <div class="setting-wrap-head margin-top-10  show-get-gift-integral-js" style="display:none;">
                    <span>奖励积分</span>
                    <input type="text" class="layui-input inline-input">
                    <span>分</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 领取方ui设置 -->
            <div class="share-page-ui-set">
              <p>分享页面UI配置</p>
              <div class="share-page-ui-wrap">
                <div class="show-ui">
                  <div class="show-ui-head">欢迎光临小微</div>
                  <div data-index = "7" class="show-ui-member-car show-ui-item-click you_background_color_target">
                    <img src="../../img/a.png" alt="会员卡">
                  </div>
                  <div class="show-ui-set-options you_background_color_target">
                    <div class="you_background_color_target">
                    <!-- 简约版 -->
                    <div data-index = "8" id="you_module_color_target"  class="show-ui-set-item show-ui-item-click">
                      <p id="you_title_editor_set_text_target">我的福利1</p>
                      <p id="you_subtitle_editor_set_text_target">邀请新人好友首次下单签收即可获得</p>
                      <div class="coupon-item  you-version-simple">
                        <div class="coupon-item-wrap" id="you_coupon_border_color_target">
                          <div class="coupon-item-wrap-left">
                            <div class="coupon-item-icon"><div id="you_coupon_limit_color_target" class="you_coupon_unit_color_target" data-mul="background">￥</div></div>
                            <div class="coupon-item-money  you_coupon_unit_color_target" data-mul="color">10</div>
                            <div class="coupon-item-info">
                              <div class="you_coupon_unit_color_target" data-mul="color">优惠券</div>
                              <div id="you_usecondition_text_font_color_target" class="you_is_show_usecondition_select_target">仅限线上活动使用</div>
                            </div>
                          </div>
                          <div id="you_subcoupontitle_font_color_target" class="coupon-item-wrap-right">无门槛</div>
                        </div>
                      </div>
                      <!-- 渐进版 -->
                      <div class="coupon-gradient-item you-version-gradient">
                        <div class="coupon-gradient-item-wrap">
                          <div>
                            <div>￥</div>
                            <div>20</div>
                          </div>
                          <div>
                            <div>邀新福利券</div>
                            <div class="you_is_show_usecondition_select_target">全场通用</div>
                            <div>有效期 2020-06-12</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="activityto_background_color_target" data-index = "9" class="activity-rule show-ui-item-click">
                      <div class="center-d">--活动规则--</div>
                      <div>邀请好友规则</div>
                      <div id="activityto_activityto_rule_html_target">1.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor</div>
                    </div>
                  </div>
                </div>
                <div style="height:50px;"></div>
                <div data-index = "10" class="center-d coupon-bottom-btn show-ui-item-click you_background_color_target">
                    <div id="bottomto_editor_title_text_target">立即邀请</div>
                </div>
              </div>
              <div class="show-ui-text-fun">
                <div style="height:60px;"></div>
                <div style="height:114px;"><div><span>背景图</span></div></div>
                <div style="height:180px;"><div><span>分享者福利</span></div></div>
                <div style="height:180px;"><div><span>活动规则展示区</span></div></div>
                <div style="height:150px;"><div></div></div>
                <div style="height:126px;"><div></div></div>
                <div style="height:70px;"><div style="align-self: flex-end;"><span>邀请按钮</span></div></div>
              </div>
              <div class="show-ui-config">
                <div class="show-ui-config-body">
                  <!-- 背景图 -->
                  <div  class="set-background-img show-or-hide-share control7">
                    <div class="set-title">背景整体设置</div>
                    <div class="set-info">
                      建议可以增加品牌LOGO与名称的元素，背景图可以是衬托活动氛围+突出收货礼品的提示分享页展示着分享者与领取者双方的福利，可以表达，分享好友，得福利礼包。
                    </div>
                    <div class="set-upload-img">
                      <div>背景图上传</div>
                      <div class="flex-two">
                        <div>*建议格式.PNG/.jpg/.jpge/.gif
                          尺寸：340*340px，图片不超过1M
                          点击下方按钮可修改图片
                        </div>
                        <div>
                          <button class="layui-btn layui-btn-primary">添加图片</button>
                        </div>
                      </div>
                    </div>
                    <div class="flex-two-color">
                      <div>背景整体填充颜色</div>
                      <div id="you_background_color"></div>
                    </div>
                  </div>
                  <!-- 我的福利 -->
                  <div style="display:none;" class="set-background-img show-or-hide-share control8">
                    <div class="set-title">分享者福利移动端UI设置</div>
                    <div class="set-info">
                      建议在分享者的角度写一些与分享者可获得的福利有关的提示
                    </div>
                    <div class="flex-two-column">
                      <div>标题文案设置</div>
                      <div><input id="you_title_editor_set_text" name="you_title_editor_set_text" type="text" class="layui-input" value="我的福利"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>文案字体颜色</div>
                      <div id="you_title_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div>副标题文案设置</div>
                      <div><input name="you_subtitle_editor_set_text" id="you_subtitle_editor_set_text" type="text" class="layui-input" value="邀请新人好友首次下单签收即可获得"></div>
                    </div>
                    <div class="flex-two-color border-border-bottom-1px border-padding-bottom-8px">
                      <div>文案字体颜色</div>
                      <div id="you_subtitle_editorfont_set_color"></div>
                    </div>
                    <div class="flex-two-column">
                      <div style="padding-bottom:0px;">福利券样式类型选择</div>
                      <div style="padding-bottom:0px;">
                        <input type="radio" lay-filter="you_coupon_style_set_radio" name="you_coupon_style_set_radio" value=0 title="简约版">
                        <input type="radio" lay-filter="you_coupon_style_set_radio" name="you_coupon_style_set_radio" value=1 title="渐变版">
                      </div>
                    </div>
                    <div class="flex-two-select">
                      <div>是否展示优惠券核销门槛</div>
                      <div>
                        <select  name="you_is_show_usecondition_select" lay-filter="you_is_show_usecondition_select" id="you_is_show_usecondition_select">
                           <option value="0">是</option>
                           <option value="1">否</option>
                        </select>
                      </div>
                    </div>
                    <div class="flex-two-color you-version-simple">
                      <div>券名称、券额度字体、单位标签填充颜色</div>
                      <div id="you_coupon_unit_mulcolor"></div>
                    </div>
                    <div class="flex-two-color  you-version-simple">
                      <div>优惠券额度单位标签字体颜色</div>
                      <div id="you_coupon_limit_color"></div>
                    </div>
                    <div class="flex-two-color  you-version-simple">
                      <div>优惠券副标题字体颜色</div>
                      <div id="you_subcoupontitle_font_color"></div>
                    </div>
                    <div class="flex-two-color  you-version-simple">
                      <div>核销门槛字体颜色</div>
                      <div id="you_usecondition_text_font_color"></div>
                    </div>
                    <div class="flex-two-color  you-version-simple">
                      <div>核销门店副券填充颜色</div>
                      <div id="you_usecondition_subtext_font_color"></div>
                    </div>
                    <div class="flex-two-color  you-version-simple border-border-bottom-1px border-padding-bottom-8px">
                      <div>优惠券边框颜色</div>
                      <div id="you_coupon_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="you_module_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="you_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="you_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="you_shadow_opacity_slider"></div>
                      </div>
                    </div>
          
                  </div>
                  <!-- 活动规则 -->
                  <div style="display: none;" class="set-background-img show-or-hide-share control9">
                    <div class="set-title">活动规则展示区设置</div>
                    <div class="set-info">
                      建议分别介绍分享方与领取方的奖励规则条件，奖励礼包福利去描述活动规则
                    </div>
                    <div style="height:450px" class="border-border-bottom-1px border-padding-bottom-8px">
                      <textarea name="" id="activityto_activityto_rule_html" style="width:378px;height:450px;"></textarea>
                    </div>
                    <div class="flex-two-color">
                      <div>模块背景填充 建议与点餐页整体色调协调</div>
                      <div id="activityto_background_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块边框颜色（无色则无边框）</div>
                      <div id="activityto_module_border_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>模块阴影颜色 设置阴影会使页面更有层次感</div>
                      <div id="activityto_module_shadow_color"></div>
                    </div>
                    <div class="flex-two-slider">
                      <div style="padding-bottom:0px;">阴影不透明度，0则无阴影</div>
                      <div style="padding-bottom:0px;">
                        <div style="height:40px;" id="activityto_shadow_opacity_slider"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 底部按钮 -->
                  <div style="display:none;" class="set-background-img show-or-hide-share control10">
                    <div class="set-title">活动规则展示区设置</div>
                    <div class="flex-two-column">
                        <div>分享按钮文案</div>
                        <div><input id="bottomto_editor_title_text" type="text" class="layui-input" value="立即邀请"></div>
                      </div>
                    <div class="flex-two-color">
                      <div>按钮文案字体的颜色</div>
                      <div id="bottomto_editor_set_color"></div>
                    </div>
                    <div class="flex-two-color">
                      <div>按钮填充颜色</div>
                      <div id="bottomto_editor_set_background_color"></div>
                    </div>
                  </div>
                </div>
                <div class="show-ui-config-bottom">
                  <div  id="getRestoreSefault">恢复默认</div>
                  <div id="getOperationBack">撤销编辑</div>
                  <div  id="getSave">保存</div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </form>
</body>
<!-- 添加会员群体弹窗的模板 -->
<script type="text/html" id="addMemberGroupTemplate">
<div class="member-popup-wrap">
  <p>会员群体选择</p>
  <p>只允许单个会员群体的会员参与本次活动</p>
  <div id="addMemberGroupWrap" class="add-member-group-wrap">

  </div>
</div>
</script>
<script type="text/html" id="includeGoodsBtn">
  <button type="button" lay-event="detail" style="margin-left:10px;" class="layui-btn layui-btn-normal layui-btn-sm">详情</button>
  <button type="button" lay-event="delete" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
</script>

<script type="text/html" id="discountCouponOperate">
  <button type="button" lay-event="detail" style="margin-left:10px;" class="layui-btn layui-btn-normal layui-btn-sm">详情</button>
  <button type="button" lay-event="delete" class="layui-btn layui-btn-danger layui-btn-sm">删除</button>
</script>

<script type="text/html" id="discountCouponIndate">
  <input type="text" class="layui-input table-input" value="{{ d.includeCount}}">
</script>
<script src="../../layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../kindeditor/kindeditor-all-min.js"></script>
<script src="./shareActivity.js"></script>

</html>